<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>欢迎注册会员</title>
    <link rel="stylesheet" href="style2.css">
    <style>
    </style>
  </head>
  <body>
    <label class="biaoti">欢迎注册会员</label>
    <form method="post" action="#">
      <label for="num" class="op"> <b>手机号码：</b></label>
      <input type="text" name="num" id="num" placeholder="11位手机号" class="li"/>
      <span style="color: red">必填</span>
      <br />

      <label for="pwd" class="op"><b>创建密码：</b> </label>
      <input type="password" name="pwd" id="pwd" placeholder="8位密码" / class="li">
      <span style="color: red">必填</span>
      <br />

      <label for="mail" class="op"> <b> 注册邮箱：</b></label>
      <input
        type="text"
        name="mail"
        id="mail"
        placeholder="例如：wustzz@sina.com"
        class="li"
      />
      <span style="color: red">必填</span>
      <br />

      <label for="yzm" class="op"> <b>&nbsp;&nbsp; 验证码：</b> </label>
      <input type="text" name="yzm" id="yzm" />
      <span id="capcha">4位验证码</span>
      <img src="images/arrow_03.png" id="change_capcha" alt="" />
      <br />

      <label class="op"><b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 性别：</b></label>
      <input type="radio" name="sex" value="male" checked="checked" /> 男
      <input type="radio" name="sex" value="female" /> 女
      <br />

      <label for="bir" class="op"> <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;生日：</b> </label>
      <input type="date" name="bir" id="bir" />
      <br />

      <label for="age" class="op"> <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年龄：</b> </label>
      <input type="text" name="age" id="age" />
      <br />

      <b class="op">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍贯：</b>
      <select id="province" onchange="showCity(this.value)">
        <option>--请选择--</option>
        <option value="安徽">安徽</option>
        <option value="浙江">浙江</option>
        <option value="江苏">江苏</option>
        <option value="湖北">湖北</option>
      </select>
      <select id="city"></select>
      <br />

      <b class="op">个人学历：</b>
<select name="major">
<option value="0">本科</option>
<option value="1" selected="selected" >专科</option>
<option value="2">无</option>
</select>
<br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b class="op">月薪：</b>
<input type="range" id="score" name="score" min="0.0" max="10000.0" step="50.0" value="6000.0" >
<span id="msg"></span>
<br>

<b class="op">个人爱好：</b>
<label>
  <input type="checkbox" name="like" value="sing">唱
  </label>
  <input type="checkbox" name="like" value="jump">跳
  </label>
  <input type="checkbox" name="like" value="rap">rap
  </label>
  <label>
  <input type="checkbox" name="like" value="basketball">篮球
  </label>
  <br>

    <b class="op">个人照片：</b>
<input type="file" id="test-image-file" name="test">
<p id="test-image-preview" >
</p>
<p></p>
<p>

</p>
<p id="test-file-info"></p>
    <p class="yu op">个人简介：
    <br>
    <textarea name="intro" cols="32" rows="10"></textarea>
    <br>
    </p>
     <input class="yu2" type="submit" value="提交">
     <input type="reset" value="重填">
    
    </form>
  </body>
</html>
<script>
  //验证码：由大小写字母或数字组成
  let codeStr =
    "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  //验证码长度
  let length = 4;
  let capcha = document.getElementById("capcha");
  let change_capcha = document.getElementById("change_capcha");
  // 用来生成一个[n,m]随机整数
  function getRandom(n, m) {
    return parseInt(Math.random() * (m - n + 1) + n);
  }
  // 将随机生成的整数下标对应的字母放入span中
  function getCode() {
    let str = "";
    // 验证码有几位就循环几次
    for (let i = 0; i < length; i++) {
      let index = getRandom(0, 61);
      str += codeStr.charAt(index);
    }
    capcha.innerHTML = str;
  }
  // 页面初始加载时就调用函数生成验证码，页面刷新也会执行
  getCode();
  // 点击刷新验证码
  capcha.addEventListener("click", getCode);
  change_capcha.addEventListener("click", getCode);
</script>
<script type="text/javascript">
  var arr = new Array(4);
  arr[0] = ["安徽", "合肥", "芜湖", "安庆", "铜陵"];
  arr[1] = ["浙江", "杭州", "宁波", "温州", "嘉兴", "湖州"];
  arr[2] = ["江苏", "南京", "苏州", "无锡"];
  arr[3] = ["湖北", "武汉", "十堰", "荆州"];

  function showCity(value) {
    var city1 = document.getElementById("city");
    var opts = city1.getElementsByTagName("option");
    for (var a = 0; a < opts.length; a++) {
      var opt = opts[a];
      city1.removeChild(opt);
      a--;
    }

    for (var i = 0; i < arr.length; i++) {
      var arr1 = arr[i];
      var fristvalue = arr1[0];
      if (fristvalue == value) {
        for (var j = 1; j < arr1.length; j++) {
          var value1 = arr1[j];
          //alert(value1);
          var option1 = document.createElement("option");
          var text1 = document.createTextNode(value1);
          option1.appendChild(text1);
          city1.appendChild(option1);
        }
      }
    }
  }
</script>
<script>
var msg = document.getElementById("msg"); // 根据id值找到span元素
window.onload = function () { 
msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值 
}
document.getElementById("score").onchange = function () { 
msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
}
</script>
<script>
var fileInput = document.getElementById('test-image-file');
var info = document.getElementById('test-file-info');
var preview = document.getElementById('test-image-preview'); 
fileInput.addEventListener('change', function () { // 监听change事件
preview.style.backgroundImage = ''; // 清除背景图片
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
} 
var file = fileInput.files[0]; // 获取File引用
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
} 
var reader = new FileReader(); // 读取文件
reader.onload = function (e) { // 发起一个异步操作来读取文件内容
var data = e.target.result; // data串形如： '...(base64编码)...' 
preview.style.backgroundImage = 'url(' + data + ')';
}; 
reader.readAsDataURL(file); // 以DataURL的形式读取文件
});
</script>